<template>
  <div>
    <el-table :data="gridData">
      <el-table-column
        v-for="(item, index) in headerData"
        :key="index"
        :property="item.prop"
        :label="item.label"
        header-align="center"
      ></el-table-column>
      <el-table-column property="name" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-refresh-left"
            header-align="center"
            @click="dictionaryBackSearch(scope)"
            >字典取回</el-button
          >
          <span class="pan">|</span>
          <!-- <el-button
            type="text"
            icon="el-icon-scissors"
            @click="completelySearch(scope)"
            >彻底删除</el-button
          > -->
          <el-button
            type="text"
            icon="el-icon-scissors"
            @click="dialogVisible = true"
            >彻底删除</el-button
          >
          <el-dialog
            title="彻底删除字典"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
            :modal="false"
          >
            <span>您确定要彻底删除这个字典项吗？</span>
            <div></div>
            <span style="color:red;">注意：彻底删除后将无法恢复，请谨慎操作！</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="completelySearch(scope)"
                >确 定</el-button
              >
            </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
  
  </div>
  
</template>

<script>
import { recycleB, dictionaryBack, completely } from "@/api/dict";
import stateTable from "@/components/xiaohei/stateTable.vue";
export default {
  data() {
    return {
      dialogTableVisible: false,
      dialogVisible: false,
      headerData: [
        {
          prop: "id",
          label: "#",
        },
        {
          prop: "dictName",
          label: "字典名称",
        },
        {
          prop: "dictCode",
          label: "字典编号",
        },
        {
          prop: "description",
          label: "描述",
        },
      ],
      gridData: [],
    };
  },
  methods: {
    // 回收站数据
    recycleBSearch() {
      let _self = this;
      recycleB().then((res) => {
        console.log(res);
        if (res.code == 0) {
          let List = res.result;
          console.log(List);
          _self.gridData = [];
          for (let item of List) {
            _self.gridData.push(item);
          }
        }
      });
    },
    // 回收站数据还原
    dictionaryBackSearch(scope, e) {
      let _self = this;
      _self.dialogTableVisible = false;
      let ida = scope.row.id;
      let data = {
        id: ida,
      };
      dictionaryBack(data).then((res) => {
        console.log(res);
        _self.recycleBSearch();
        if (res.code == 200) {
          _self.$message({
            message: res.message,
            type: "success",
          });
        }
      });

      console.log(_self.$parent);
      console.log(e);
      _self.$emit("categoryListTreeSearch");
      console.log(_self.$emit);
    },
    // 回收站数据删除
    completelySearch(scope) {
      console.log(scope);
   
      let ida = scope.row.id;
      let _self = this;
      let data = {
        id: ida,
      };
      completely(data).then((res) => {
        _self.recycleBSearch();
      });
       _self.$message({
            message: "删除成功！",
            type: "success",
          });
         _self.dialogVisible=false
    },
  },
  mounted() {
    this.recycleBSearch();
  },
  components: {
    stateTable,
  },
};
</script>

<style>
</style>